let React = require('react');
let Header = require('./header.jsx');
let SearchBox = require('./common/search-box.jsx');

let HotPostList = React.createClass({
  getInitialState: function () {
    return {
      resultList: []
    };
  },

  componentDidMount: function () {
    $.getJSON(baseUrl + "getTextList/1/", function (result, status) {
      console.log(result.data);
      if (this.isMounted()) {
        this.setState({
          resultList: result.data
        });
      }
    }.bind(this));
  },

  handleClick: function (href) {
    location.href = href;
  },

  render: function () {
    return (
      <div className="cards">
        {this.state.resultList.map(function (post) {
          var href = 'post.html?id=' + post.id;
          var blogHref = 'blog.html?id=' + post.author_id;
          return (
              <div className="card" key={post.id} onClick={this.handleClick.bind(this, href)}>
                <div className="card-image">
                  <img src="mountains-3.png"/>
                </div>
                <div className="card-header">
                  {post.title}
                </div>
                <div className="card-copy">
                  <a href={blogHref}>{post.author_name}</a>
                </div>
              </div>
          )
        }, this)}
      </div>

    );
  }
});

let Main = React.createClass({

  render: function () {
    return (
      <div>
        <Header description="享受写作的乐趣" title="博客系统"/>
        <HotPostList/>
      </div>
    );
  }
});

module.exports = Main;
